<template>
  <base-page v-bind="baseInfo">
    <template #content>
      <div class="top">
        <div class="control">
          <div class="picker">
            <div>时间：</div>
            <el-date-picker
              v-model="month"
              type="month"
              placeholder="请选择月份"
              format="yyyy-MM"
              value-format="yyyy-MM"
              size="mini"
              @change="change"
            />
          </div>
          <Button icon="attract" :loading="btnLoading" style="margin-right: 8px;" @click="handleCollect">采集用友数据</Button>
          <Button icon="attract" @click="showSubject">采集用友科目</Button>
        </div>
        <div class="icon">
          <div class="item">
            <svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 cymsJQ svg-icon-path-icon fill" viewBox="0 0 512 512" width="64" height="64"><defs data-reactroot="" /><g><path d="M371.7 238l-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256z" /></g></svg>
            <div class="title">开始采集</div>
          </div>
          <div class="item arrow">
            <svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 cymsJQ svg-icon-path-icon fill" viewBox="0 0 448 512" width="32" height="32"><defs data-reactroot="" /><g><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z" /></g></svg>
          </div>
          <div class="item">
            <svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 cymsJQ svg-icon-path-icon fill" viewBox="0 0 24 24" width="64" height="64"><defs data-reactroot="" /><g><path d="M3 3C2.44772 3 2 3.44772 2 4V7C2 7.55228 2.44772 8 3 8H21C21.5523 8 22 7.55228 22 7V4C22 3.44772 21.5523 3 21 3H3Z" fill="black" /><path fill-rule="evenodd" clip-rule="evenodd" d="M3 9.5C3 9.22386 3.22386 9 3.5 9H20.5C20.7761 9 21 9.22386 21 9.5V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V9.5ZM8 12C8 11.4477 8.44772 11 9 11H15C15.5523 11 16 11.4477 16 12C16 12.5523 15.5523 13 15 13H9C8.44772 13 8 12.5523 8 12Z" fill="black" /></g></svg>
            <div class="title">部门识别</div>
          </div>
          <div class="item arrow">
            <svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 cymsJQ svg-icon-path-icon fill" viewBox="0 0 448 512" width="32" height="32"><defs data-reactroot="" /><g><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z" /></g></svg>
          </div>
          <div class="item">
            <svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 fPsHiw svg-icon-path-icon" viewBox="0 0 1024 1024" width="64" height="64"><defs data-reactroot="" /><g><path d="M604.16 538.624H481.28v-62.2592h122.88a20.48 20.48 0 0 0 0-40.96H481.28V430.08l102.4-103.0144a20.48 20.48 0 1 0-28.8768-28.8768L460.8 392.4992l-100.2496-100.1472a20.48 20.48 0 1 0-28.8768 28.8768L440.32 430.08v5.4272H317.44a20.48 20.48 0 0 0 0 40.96h122.88v62.1568H317.44a20.48 20.48 0 1 0 0 40.96h122.88V696.32a20.48 20.48 0 0 0 40.96 0V579.584h122.88a20.48 20.48 0 0 0 0-40.96z" p-id="2808" fill="#2265FA" /><path d="M512 51.2a460.8 460.8 0 0 0 0 921.6 20.48 20.48 0 0 0 0-40.96 419.84 419.84 0 1 1 419.84-419.84 20.48 20.48 0 0 0 40.96 0A461.312 461.312 0 0 0 512 51.2z" p-id="2809" fill="#2265FA" /><path d="M931.84 706.56H694.5792l77.6192-77.7216a20.48 20.48 0 0 0-28.8768-28.8768l-112.64 112.64a20.48 20.48 0 0 0-4.5056 22.3232A20.48 20.48 0 0 0 645.12 747.52h286.72a20.48 20.48 0 0 0 0-40.96zM931.84 798.72H645.12a20.48 20.48 0 0 0 0 40.96h237.2608l-77.6192 77.7216a20.48 20.48 0 1 0 28.8768 28.8768l112.64-112.64a20.48 20.48 0 0 0 4.5056-22.3232A20.48 20.48 0 0 0 931.84 798.72z" p-id="2810" fill="#2265FA" /></g></svg>
            <div class="title">预算科目执行数据采集</div>
          </div>
          <div class="item arrow">
            <svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 cymsJQ svg-icon-path-icon fill" viewBox="0 0 448 512" width="32" height="32"><defs data-reactroot="" /><g><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z" /></g></svg>
          </div>
          <div class="item">
            <svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 cymsJQ svg-icon-path-icon fill" viewBox="0 0 32 32" width="64" height="64"><defs data-reactroot="" /><g><path d="M16 29.333c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333 13.333 5.969 13.333 13.333-5.969 13.333-13.333 13.333zM14.671 21.333l9.427-9.428-1.885-1.885-7.541 7.543-3.772-3.772-1.885 1.885 5.657 5.657z" /></g></svg>
            <div class="title">完成采集</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <TableNew
          :loading="tableLoading"
          :data="tableData"
          :columns="tableEl"
          :pagination="pagination"
          @paginationChange="paginationChange"
        >
          <template #collectionState="scope">
            <div v-if="scope.row.collectionState===1">采集成功</div>
            <div v-else-if="scope.row.collectionState===2">采集失败</div>
          </template>
        </TableNew>
        <Dialog
          ref="dialog"
          :visible="dialogVisible"
          title="采集用友科目"
          :footer-btns="footerBtns"
          @cancel="yearCancel"
          @confirm="yearConfirm"
        >
          <el-date-picker
            v-model="year"
            type="year"
            placeholder="请选择年份"
            format="yyyy"
            value-format="yyyy"
            size="mini"
            @change="changeYear"
          />
        </Dialog>
      </div>
    </template>
  </base-page>
</template>

<script>
import * as dayjs from 'dayjs'

import {
  collectAssetData,
  getYsCollectionRecordList,
  collectSubjectDataYear
} from '@/api/collectionManage/dataCollect'

export default {
  name: 'DataCollect', // 数据采集
  components: {},
  props: {},
  data() {
    return {
      baseInfo: {},
      month: '',
      tableLoading: false,
      tableData: [],
      tableEl: [
        {
          title: '操作时间',
          dataIndex: 'operTime'
        },
        {
          title: '采集月份',
          dataIndex: 'collectionMonth'
        },
        {
          title: '状态',
          dataIndex: 'collectionState',
          type: 'otherTag'
        },
        {
          title: '操作人',
          dataIndex: 'operPerson'
        }
      ],
      pagination: {
        current: 1,
        pageSize: 100,
        total: 10
      },
      btnLoading: false,
      dialogVisible: false,
      footerBtns: [
        {
          text: '采集',
          trigger: 'confirm'
        },
        {
          text: '取消',
          trigger: 'cancel',
          type: 'info'
        }
      ],
      year: ''
    }
  },
  created() {
    // this.$loading.show()
    this.initMonth()
    this._getYsCollectionRecordList()
  },
  mounted() {},
  methods: {
    initMonth() {
      const index = dayjs().get('month') - 1
      this.month = dayjs().year() + '-' + dayjs().month(index).format('MM')
    },
    change(val) {
      console.log(val)
    },
    paginationChange(val) {
      this.pagination.current = val?.current || this.pagination.current
      this.pagination.pageSize = val?.pageSize || this.pagination.pageSize
      this._getYsCollectionRecordList()
    },
    async handleCollect() {
      const params = {
        year: this.month.split('-')[0],
        month: this.month.split('-')[1]
      }
      try {
        this.btnLoading = true
        collectAssetData(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message || '数据采集成功')
          } else {
            this.$message.error(res.data.message || '数据采集失败')
          }
        }).finally(e => {
          this.btnLoading = false
          this._getYsCollectionRecordList()
        })
        this._getYsCollectionRecordList()
        // if (data.code === 200) {

        // } else {

        // }
      } catch (error) {
        console.log(error)
      }
    },
    async _getYsCollectionRecordList() {
      const params = {
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current
      }
      try {
        this.tableLoading = true
        const { data } = await getYsCollectionRecordList(params)
        if (data.code === 200) {
          this.tableData = data.data.list
          this.pagination.total = data.data.total
        } else {
          console.log(data)
        }
        this.tableLoading = false
      } catch (error) {
        this.tableLoading = false
        console.log(error)
      }
    },
    showSubject() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.year = new Date().getFullYear() + ''
      })
    },
    changeYear() {

    },
    yearCancel() {
      this.dialogVisible = false
    },
    async yearConfirm() {
      if (!this.year) return this.$message.warning('请选择年份')
      this.$refs.dialog.loadOn('confirm')
      const params = {
        year: this.year
      }
      try {
        const { data } = await collectSubjectDataYear(params)
        if (data.code === 200) {
          this.$message.success(data.message || '操作成功')
          this.yearCancel()
        } else {
          this.$message.error(data.message || '操作失败')
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.$refs.dialog.loadOff('confirm')
      }
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.content) {
  background-color: #f0f2f5 !important;
padding: 0 !important;
}
.top{
  height: calc((100% - 8px) / 10 * 3);
  margin-bottom: 8px;
  background-color: #fff;
  padding: 8px;
  display: flex;
  flex-direction: column;
  .control{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    .picker{
      display: flex;
      align-items: center;
      margin-right: 16px;
    }
  }
  .icon{
    height: calc(100% - 68px);
    display: flex;
    justify-content: center;
    align-items: center;
    .item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 140px;
      .title{
        margin-top: 8px;
      }
    }
    .arrow{
      width: 60px;
    }
    .cymsJQ.fill:not([stroke]) {
      fill: #2165f9;
    }
    .cymsJQ.fill g [fill]{
      fill: rgb(34, 101, 250);
      stroke: none;
    }
  }
}
.bottom{
  height: calc((100% - 8px) / 10 * 7);
  background-color: #fff;
  padding: 8px;
  display: flex;
  flex-direction: column;
}
</style>
